<!DOCTYPE html>
<html>
<head>
<title>I am INDEX</title>
<meta charset="utf-8">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/three.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script type="text/javascript">
	// 获取json的元素数量
	function JSONLength(obj) {
		var size = 0, key;
		for (key in obj) {
			if (obj.hasOwnProperty(key))
				size++;
		}
		return size;
	};
	$(function() {
		$("#menu").hide();
		$("input").on("click", function() {
							$.getJSON("http://localhost:8080/demo", function(data) {
							
							$("input").hide();
							$("#menu").show();
							//
							// 大字、小字一、小字二，行，列    -- 另，序号
							// var table = []
							var camera, scene, renderer;
							var controls;

							var objects = [];
							var targets = {
								table : [],
								sphere : [],
								helix : [],
								grid : []
							};

							init();
							animate();
							function init() {
								camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
								camera.position.z = 3000;

								scene = new THREE.Scene();

								for (var i = 0; i < JSONLength(data); ++i) {
									var row = data[i];

									var oneDomObj = document.createElement('div');
									oneDomObj.className = 'element';
									oneDomObj.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'; // 元素的背景色
									// 序号
									var number = document.createElement('div');
									number.className = 'number';
									number.textContent = i + 1;// 这是数字
									oneDomObj.appendChild(number);
									// 大字
									var symbol = document.createElement('div');
									symbol.className = 'symbol';
									symbol.textContent = row.surname; // 这是符号
									oneDomObj.appendChild(symbol);
									// 两行小字
									var details = document.createElement('div');
									details.className = 'details';
									details.innerHTML = row.firstName + '<br/>' + row.words;
									oneDomObj.appendChild(details);
									// what's for?
									var css3DObject = new THREE.CSS3DObject(oneDomObj); 
									css3DObject.position.x = Math.random() * 4000 - 2000;
									css3DObject.position.y = Math.random() * 4000 - 2000;
									css3DObject.position.z = Math.random() * 4000 - 2000;
									scene.add(css3DObject);

									objects.push(css3DObject); // push to array

									// what's for?
									var object3D = new THREE.Object3D();
									object3D.position.x = (((i+12)%12)* 140) - 1330;
									object3D.position.y = -((i/12+1) * 180) + 990;

									targets.table.push(object3D);

								}

								// sphere
								var vector = new THREE.Vector3();

								for (var i = 0, l = objects.length; i < l; i++) {
									var phi = Math.acos(-1 + (2 * i) / l);
									var theta = Math.sqrt(l * Math.PI) * phi;

									var object = new THREE.Object3D();

									object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
									object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
									object.position.z = 800 * Math.cos(phi);

									vector.copy(object.position).multiplyScalar(2);

									object.lookAt(vector);

									targets.sphere.push(object);
								}

								// helix
								var vector = new THREE.Vector3();
								for (var i = 0, l = objects.length; i < l; i++) {
									var phi = i * 0.175 + Math.PI;

									var object = new THREE.Object3D();

									object.position.x = 900 * Math.sin(phi);
									object.position.y = -(i * 8) + 450;
									object.position.z = 900 * Math.cos(phi);

									vector.x = object.position.x * 2;
									vector.y = object.position.y;
									vector.z = object.position.z * 2;

									object.lookAt(vector);

									targets.helix.push(object);
								}

								// grid
								for (var i = 0; i < objects.length; i++) {
									var object = new THREE.Object3D();

									object.position.x = ((i % 5) * 400) - 800;
									object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
									object.position.z = (Math.floor(i / 25)) * 1000 - 2000;

									targets.grid.push(object);
								}

								//
								renderer = new THREE.CSS3DRenderer();
								renderer.setSize(window.innerWidth, window.innerHeight);
								renderer.domElement.style.position = 'absolute';
								document.getElementById('container').appendChild(renderer.domElement);

								//
								controls = new THREE.TrackballControls(camera, renderer.domElement);
								controls.rotateSpeed = 0.5;
								controls.minDistance = 500;
								controls.maxDistance = 6000;
								controls.addEventListener('change', render);

								var button = document.getElementById('table');
								button.addEventListener('click', function(event) {
											transform(targets.table, 2000);
										}, false);

								var button = document.getElementById('sphere');
								button.addEventListener('click', function(event) {
											transform(targets.sphere, 2000);
										}, false);

								var button = document.getElementById('helix');
								button.addEventListener('click', function(event) {
											transform(targets.helix, 2000);
										}, false);

								var button = document.getElementById('grid');
								button.addEventListener('click', function(event) {
											transform(targets.grid, 2000);
										}, false);

								transform(targets.table, 2000);

								//
								window.addEventListener('resize', onWindowResize, false);
							}
							// 
							function transform(targets, duration) {
								TWEEN.removeAll();
								for (var i = 0; i < objects.length; i++) {
									var object = objects[i];
									var target = targets[i];

									new TWEEN.Tween(object.position)
											.to(
													{
														x : target.position.x,
														y : target.position.y,
														z : target.position.z
													},
													Math.random() * duration + duration)
											.easing(TWEEN.Easing.Exponential.InOut)
											.start();

									new TWEEN.Tween(object.rotation)
											.to(
													{
														x : target.rotation.x,
														y : target.rotation.y,
														z : target.rotation.z
													},
													Math.random() * duration + duration)
											.easing(TWEEN.Easing.Exponential.InOut)
											.start();

								}

								new TWEEN.Tween(this).to({}, duration * 2).onUpdate(render).start();

							}

							function onWindowResize() {
								camera.aspect = window.innerWidth / window.innerHeight;
								camera.updateProjectionMatrix();
								renderer.setSize(window.innerWidth, window.innerHeight);
								render();

							}

							function animate() {
								requestAnimationFrame(animate);
								TWEEN.update();
								controls.update();
							}

							function render() {
								renderer.render(scene, camera);
							}
						})
					});
	});
</script>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
	height: 100%;
}

body {
	background-color: #110000;
	margin: 0;
	font-family: Helvetica, sans-serif;;
	overflow: hidden;
}

a {
	color: #ffffff;
}

#info {
	position: absolute;
	width: 100%;
	color: #ffffff;
	padding: 5px;
	font-family: Monospace;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	z-index: 1;
}

#menu {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}

.element {
	width: 120px;
	height: 160px;
	box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
	border: 1px solid rgba(127, 255, 255, 0.25);
	text-align: center;
	cursor: default;
}

.element:hover {
	box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
	border: 1px solid rgba(127, 255, 255, 0.75);
}

.element .number {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 12px;
	color: rgba(127, 255, 255, 0.75);
}

.element .symbol {
	position: absolute;
	top: 40px;
	left: 0px;
	right: 0px;
	font-size: 60px;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}

.element .details {
	position: absolute;
	bottom: 15px;
	left: 0px;
	right: 0px;
	font-size: 12px;
	color: rgba(127, 255, 255, 0.75);
}

button {
	color: rgba(127, 255, 255, 0.75);
	background: transparent;
	outline: 1px solid rgba(127, 255, 255, 0.75);
	border: 0px;
	padding: 5px 10px;
	cursor: pointer;
}

button:hover {
	background-color: rgba(0, 255, 255, 0.5);
}

button:active {
	color: #000000;
	background-color: rgba(0, 255, 255, 0.75);
}
</style>
</head>
<body>
	<input type="button" name="submit" value="CLICK!" />
	<div id="container"></div>
	<div id="menu">
		<button id="table">TABLE</button>
		<button id="sphere">SPHERE</button>
		<button id="helix">HELIX</button>
		<button id="grid">GRID</button>
	</div>
</body>
</html>